<template>
  <div class="top-container">
    <div class="left">
      <img class="avator" src="../assets/logo.png" alt="logo" width="50px" height="50px">
    </div>
    <div class="middle">夕阳红聊天室</div>
    <div class="right">
      <avator></avator>
    </div>
  </div>
</template>

<script lang="ts">
import  {defineComponent} from 'vue'
import Avator from "@/components/Avator.vue";
export default defineComponent({
  name: "Top",
  components:{Avator},
  data () {
    return {

    }
  }
})
</script>

<style   scoped>
.top-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  background-color: #86DBFF;

}
</style>
